<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局与局部</title>
    <script src="../../vue2.js"></script>
</head>
<body>
<div id="box">
    <navbar></navbar>
    <hhl-all></hhl-all>
<!--    <hhl-child></hhl-child>-->
</div>
<script>
    //定义一个全局组件
    Vue.component("navbar", {
        //dom,js,css
        template: `<div style="background-color: skyblue;border: 2px solid black">
                        <button @click="handleLeft" >left</button>
                        猫眼电影
                        <button @click="handleRight">right</button>

                        <hhl-all></hhl-all>
                        <hhl-child></hhl-child>
                   </div>`,
        methods: {
            handleLeft() {
                console.log('点击left按钮')
            },
            handleRight() {
                console.log('点击right按钮')
            }
        },
        computed: {},
        watch: {},
        //data必须是函数写法
        data() {
            return {}
        },

        //局部变量
        components:{
            "hhlChild":{
                template:`<div style="background-color: pink">
                                hhlAll-我是局部组件
                           </div>`
            }
        }

    })

    //全局，在局部和全局都可以用
    Vue.component("hhlAll", {
        template: `<div style="background-color: coral">
                       hhlAll-我是全局组件
                  </div>`
    })

    //根组件
    new Vue({
        el: '#box'
    })
</script>
</body>
</html>